/**
 * Created by dazq on 16/11/22.
 */
import React, { Component } from 'react';
import { AppRegistry, ListView, Alert,Text,Button, View,TouchableHighlight } from 'react-native';
import { Actions } from 'react-native-router-flux';

export default class ListViewBasics extends Component {
    // 初始化模拟数据
    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows([
                'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
            ]),
            data:props.data
        };
    }
    _onPressButton(rowID) {
        Actions.listView({data:"Custom data s", title:rowID ,rowID:rowID})
    }

    render() {
        return (
            <View style={{flex: 1,backgroundColor:"#F0F8FF",marginTop:60}}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={
                        (rowData,sectionID,rowID) =>
                        <View style={{backgroundColor:"white",marginTop:10,height:50,marginLeft:8,marginRight:8,justifyContent:'center'}}>
                            <Button onPress={()=>(this._onPressButton(rowID))} title={rowData+' '+rowID} style={{marginTop:10}} color="#841584" />
                        </View>
                    }
                    renderHeader={
                        ()=><Text>This is the {this.state.data}</Text>
                    }
                    renderFooter={
                        ()=><Text>This is the footer</Text>
                    }
                />
            </View>
        );
    }
}


class SubListViewBasics extends Component {
    
    // 初始化模拟数据
    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows([
                'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
            ])
        };
    }
    _onPressButton(rowID) {
        if(this.props.navigator){
            this.props.navigator.pop()
        }
    }

    render() {
        return (
            <View style={{flex: 1,backgroundColor:"#F0F8FF"}}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={
                        (rowData,sectionID,rowID) =>
                        <View style={{backgroundColor:"white",marginTop:10,height:50,marginLeft:8,marginRight:8}}>
                            <Button onPress={()=>(this._onPressButton(rowID))} title={rowData+' '+rowID} style={{marginTop:10}} color="#841584" />
                        </View>
                    }
                    renderHeader={
                        ()=><Text>This is the header</Text>
                    }
                    renderFooter={
                        ()=><Text>This is the footer</Text>
                    }
                />
            </View>
        );
    }
}